<template>
  <div class="systemManage">
    <h-header></h-header>
    <div class="content">
      <sidebarM></sidebarM>
      <div class="main-content">
        <div class="search_h clearfix">
          <p>
            <a href="#" onClick="javascript:history.back(-1)">机构管理</a>
          </p>
        </div>
        <div>
          <!-- 机构首页 -->
          <div class="cont">
            <div class="btn-group">
              <span class="btn" @click="addJigouClick">增加同级机构</span>
              <span class="btn" @click="getFirstJigouList()" v-if="this.suplist.suporgid!=''">向上</span>
              <span class="text">上级机构：{{this.suplist.orgname}}</span>
            </div>
            <table width="95%">
              <thead>
                <tr>
                  <th>编号</th>
                  <th>名称</th>
                  <th>备注</th>
                  <th width="320px">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in jigouFirstList" :key="item.id">
                  <td>{{item.hash.orgid}}</td>
                  <td>{{item.hash.orgname}}</td>
                  <td>备注内容</td>
                  <td>
                    <span @click="getFirstJigouList(item.hash.orgid)">查看下级机构</span>
                    <span @click="modifyFirstJigouInfo(item.hash.orgid)">修改</span>
                    <el-button type="text" @click="deleteAreaItem(item.hash.orgid)">删除</el-button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- 增加机构 -->
          <el-dialog title="机构管理" :visible.sync="dialogTableVisible7" width="85%">
            <div class="addInfo">
              <div class="title">新增机构</div>
              <table width="95%">
                <tbody>
                  <tr>
                    <td>上级机构:</td>
                    <td>
                      <input
                        type="text"
                        :value="this.suplist.orgname+'--'+this.suplist.orgid"
                        readonly
                      >
                    </td>
                  </tr>
                  <tr>
                    <td>机构名称:</td>
                    <td>
                      <input type="text" v-model="newFirstJigou">
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2" v-show="showFirstJigouSubmit" @click="addJigou">
                      <span>提交</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HHeader from '~/components/common/header/Mheader';
import sidebarM from '~/components/common/sidebar/sidebarM';

export default {
  data() {
    return {
      dialogTableVisible7: false,

      showFirstJigouSubmit: false,
      sideMenu: [],
      isRouterAlive: true,

      ts: this.newStore(),
      // 分页相关
      group: 1, // 分组
      total: 0, // 数据总数
      num: 1, // 当前页
      limit: '30', // 每组有多少条数据

      // 机构管理相关
      jigouFirstList: [], //
      suplist: {},
      nowOrgname: '', // 点击查看下级代码，保存当前一级结构的名称
      nowOrgid: '',
      nowSupid: '',
      newFirstJigou: '',
      len: 0,
    };
  },
  created() {
    // this.getSidemenu();
    this.getFirstJigouList(1);
  },

  methods: {
    getSidemenu() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B078C37EB4CBA2359',
        token: localStorage.getItem('token'),
        supid: this.$route.query.funcid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.sideMenu = ts.d.data.operation1;
      });
    },

    // 机构管理
    // 获取一级机构列表数据
    getFirstJigouList(supid) {
      if (!supid) {
        supid = this.suplist.suporgid;
      }
      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD0ECC64278BA7F847',
        token: localStorage.getItem('token'),
        suporg: supid,
      };

      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.suplist = ts.d.data.operation2[0].hash;
        this.jigouFirstList = ts.d.data.operation1;
        if (!this.jigouFirstList[0].hash.orgid) {
          this.jigouFirstList = [];
        }
      });
    },

    // 增加一级机构
    addJigou() {
      const req = {
        handle:
          '67A5B6FEF17D97DEADDD1AC49C9AAE0F23BF67C4BA491981CE1E5CDA4F86E415',
        token: localStorage.getItem('token'),
        suporgid: this.suplist.orgid,
        orgname: this.newFirstJigou,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.data.operation1[0].hash.cou == '0') {
          let res;
          if (this.nowOrgid) {
            res = {
              handle: '67A5B6FEF17D97DE0AB0D17168BEEBCD04453EE0A5CF10A0',
              token: localStorage.getItem('token'),
              suporgid: this.nowSupid,
              orgname: this.newFirstJigou,
              remark: '',
              orgid: this.nowOrgid,
            };
          } else {
            res = {
              handle: '67A5B6FEF17D97DE8AD68148755261CACC426B34C0BBA8ED',
              token: localStorage.getItem('token'),
              suporgid: this.suplist.orgid,
              orgname: this.newFirstJigou,
              remark: '',
            };
          }
          this.spost(this.ts, '/mainservlet', res).then(() => {
            this.getFirstJigouList(this.suplist.orgid);
          });
          this.dialogTableVisible7 = false;
          this.showFirstJigouSubmit = false;
        } else {
          this.$message({
            type: 'error',
            message: '机构名称已存在，请修改机构名称后再提交！',
          });
        }
      });
    },
    // 删除一级机构
    deleteAreaItem(orgid) {
      this.$confirm('确认删除?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const res = {
            handle: '67A5B6FEF17D97DEF1D0D23DA4270B6399C94A60607326CA',
            token: localStorage.getItem('token'),
            orgid,
            suporgid: this.suplist.orgid,
          };
          this.spost(this.ts, '/mainservlet', res).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
            this.getFirstJigouList(this.suplist.orgid);
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    // 一级机构点击修改
    modifyFirstJigouInfo(orgid) {
      // 渲染单条信息
      const req = {
        handle: '67A5B6FEF17D97DE41472B87C055439393B923BD4A7449EE',
        token: localStorage.getItem('token'),
        orgid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.nowOrgid = orgid;
        this.newFirstJigou = ts.d.data.operation1[0].hash.orgname;
        this.nowSupid = ts.d.data.operation1[0].hash.suporgid;
      });

      this.showFirstJigouSubmit = true;
      this.dialogTableVisible7 = true;
    },

    // 到新增机构页
    addJigouClick() {
      this.showFirstJigouSubmit = true;
      this.newFirstJigou = '';
      this.dialogTableVisible7 = true;
    },
  },
  components: {
    HHeader,
    sidebarM,
  },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
table >>> .el-button--text {
  color: #00f;
  padding: 0 5px 0 0;
  border-radius: 0;
}

table >>> .el-message--success {
  color: #00f;
}

// table >>> .el-button--text
// border-right: none;
.show-role >>> .el-button {
  padding: 5px 15px;
}

.show-role >>> .el-button--primary {
  background: #69f;
  border-color: #69f;
}

.systemManage {
  width: 100%;

  .content {
    display: flex;
    width: 100%;
    min-height: 600px;

    .sidebar {
      flex: 0 0 200px;
      width: 200px;
      background: #F2F2F2;
      border-right: 1px solid #ccc;

      .main-title {
        flex: 1;
        width: 100%;
        height: 44px;
        line-height: 44px;
        border-bottom: 2px solid #fff;
        color: #13227A;
        font-size: 0;

        .iconfont {
          display: inline-block;
          margin-right: 15px;
          font-size: 20px;
          text-indent: 1em;
        }

        .text {
          display: inline-block;
          font-weight: 600;
        }
      }

      .menu {
        display: block;
        width: 100%;
        text-indent: 2em;
        cursor: pointer;
        background: #ffffff;

        .title {
          height: 48px;
          line-height: 48px;
          border-bottom: 1px solid #ccc;
          padding-left: 10px;

          &.choosed {
            background: #ccc;
            color: #333;
          }
        }
      }
    }

    .main-content {
      flex: 1;
      min-height: 780px;

      .search_h {
        height: 44px;
        line-height: 44px;
        padding-left: 20px;
        background: #f2f2f2;
        border-bottom: 2px solid #fff;

        p {
          float: left;
          font-size: 16px;

          a {
            color: #69f;
          }

          span {
            font-size: 14px;
            padding-left: 15px;
          }
        }
      }

      .search_c {
        width: 100%;
        padding: 20px;
        border-bottom: 1px solid #f1f1f1;

        .billlist {
          margin-bottom: 30px;

          span {
            display: inline-block;
            font-size: 14px;
            width: 30%;
            min-width: 100px;

            &:first-child {
              padding-left: 20px;
            }

            .selectC {
              box-sizing: content-box;
              width: 190px;
              padding: 8px 5px;
              border-radius: 2px;
              box-shadow: 0 0 5px #ccc;
              font-size: 14px;
              color: #333;
            }

            input {
              box-sizing: content-box;
              width: 190px;
              padding: 7px 5px;
              margin-left: 5px;
              border-radius: 2px;
              border: 1px solid #ccc;
              color: #333;
            }
          }
        }

        .search {
          margin: 0 auto;
          width: 80px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          font-size: 14px;
          background-color: #69f;
          color: #fff;
          border-radius: 5px;
          font-weight: 400;
          cursor: pointer;
        }
      }

      .cont {
        padding-left: 30px;

        .btn-group {
          margin: 10px 0;

          .btn {
            display: inline-block;
            padding: 10px;
            margin-right: 15px;
            text-align: center;
            font-size: 14px;
            background-color: #69f;
            color: #fff;
            font-weight: 400;
            cursor: pointer;
          }

          .text {
            select {
              min-width: 100px;
              height: 30px;
              border: 1px solid #ccc;
            }
          }
        }

        table {
          text-align: center;
          padding-left: 30px;
          cursor: pointer;
          border-collapse: collapse;

          td, th {
            border: 1px solid #ccc;
            font-size: 14px;
            color: #666;
            height: 40px;
          }

          thead {
            th {
              font-weight: 600;
              background-color: #F2F2F2;
            }
          }

          tbody {
            td {
              span {
                display: inline-block;
                vertical-align: middle;
                margin: 0 5px;
                padding-right: 5px;
                border-right: 1px solid #999;
                color: blue;

                &:last-child {
                  border-right: none;
                }
              }
            }
          }
        }

        .pagination-wrapper {
          height: 60px;
          line-height: 60px;
          text-align: center;

          .desc {
            margin-left: 50px;
            display: inline-block;
            font-size: 14px;

            span {
              color: #666;

              i {
                padding: 0 3px;
                font-size: 16px;
                color: #25a4bb;
              }
            }
          }
        }
      }

      .addInfo {
        padding: 0 30px;

        .title {
          padding: 15px 0;
          font-size: 16px;

          span {
            color: #69f;
            cursor: pointer;
          }
        }

        table {
          padding-left: 30px;
          cursor: pointer;
          border-collapse: collapse;

          tbody {
            tr {
              td {
                border: 1px solid #ccc;
                font-size: 14px;
                color: #666;
                height: 40px;
                padding: 0 15px;

                &:nth-of-type(odd) {
                  text-align: right;
                }

                input:not([type='radio']):not([type='checkbox']) {
                  width: 300px;
                  height: 30px;
                  border: 1px solid #ccc;
                }

                select {
                  width: 200px;
                  height: 30px;
                  border: 1px solid #ccc;
                }

                label {
                  display: inline-block;
                  padding: 0 15px 0 5px;
                }

                checkbox {
                  display: inline-block;
                  vertical-align: top;
                }
              }

              &:last-child {
                td {
                  text-align: center;

                  span {
                    padding: 5px 15px;
                    font-size: 14px;
                    background-color: #69f;
                    color: #fff;
                    border-radius: 5px;
                    font-weight: 400;
                    cursor: pointer;
                  }
                }
              }
            }
          }
        }
      }

      .show-role {
        padding: 0 30px;

        .title {
          padding: 15px 0;
          font-size: 16px;

          span {
            color: #69f;
            cursor: pointer;
          }
        }

        .list {
          margin-bottom: 15px;

          span {
            margin-right: 15px;
          }
        }
      }
    }
  }
}
</style>

